<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h3>😀抖抖代码</h3>
        <input type="text">
        <div class="boxs">
        </div>
        <script>
            class input{
                constructor(el){
                    this.observers =[];
                    el.addEventListener("input",(e)=>{
                        this.notifyAll(e.target.value);
                    })
                }
                notifyAll(value){
                    this.observers.forEach(item=>{
                        item.notify(value);
                    })
                }
                addObserver(ob){
                    this.observers.push(ob);
                }
            }

            class observer extends DocumentFragment{
                constructor(txt){
                    super()
                    this.div = document.createElement("div");
                    this.div.className = "box";
                    this.div.innerText = txt;

                    document.querySelector(".boxs").append(this.div);
                }
                notify(value){
                    this.div.classList.toggle("active",this.handle(value));
                }
            }

            class defaultObserver extends observer{
                constructor(txt){
                    super(txt);
                    this.txt = txt;
                }
                handle(value){
                    return value.indexOf(this.txt)!==-1;
                }
            }

            class numberObserver extends observer{
                constructor(txt){
                    super(txt);
                }
                handle(value){
                    return /\d/.test(value);
                }
            }

            const ipt = new input(document.querySelector("input"));
            ipt.addObserver(new defaultObserver("A"));
            ipt.addObserver(new defaultObserver("b"));
            ipt.addObserver(new defaultObserver("c"));
            ipt.addObserver(new numberObserver("包含数字"));
        </script>
</body>
</html>